<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>拖拽读取文件</title>
</head>
<style>
body {
    margin: 0;
    padding: 0;
}

#text-area {
    height: 300px;
    background-color: #FCF6E5;
    position: relative;
    font-size: 20px;
    overflow: auto;
    font-weight: bold;
}

#text-area #info {
    border-radius: 20px;
    height: 100px;
    font-size: 40px;
    color: #A84631;
    text-align: center;
    line-height: 100px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
</style>

<body>
    <div id="text-area">
        <div id="info">将文件拖拽到此处打开</div>
    </div>
</body>
<script>
/*释放目标时触发的事件:
        ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
        ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
        ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
        ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
    */
const fs = require("fs");
const path = require("path");

let textArea = document.getElementById("text-area")
textArea.ondragenter = textArea.ondragover = textArea.ondragleave = function(e) {
    e.preventDefault();
}

textArea.ondrop = function(e) {
    e.preventDefault();
    let filePath = e.dataTransfer.files[0].path;
    console.log(filePath);
    fs.readFile(filePath, "utf-8", function(err, data){
        textArea.innerHTML = data;
    })

}

</script>

</html>